Day22 Vue元件

2023 iThome 鐵人賽

DAY 22

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 22 篇

15th鐵人賽

jenny

2023-10-07 09:40:25

208 瀏覽

分享至

Vue元件:
VUE 的元件是什麼?簡單來說，元件就像是獨立的小工具，可以幫我們把畫面拆分成一塊一塊的，讓程式碼看起來更簡潔，也更容易維護。
這樣一來，不僅可以提升開發效率，也能使我們的程式碼更容易重複使用。

一開始，會將元件的邏輯寫在一個獨立的 JavaScript 檔案中。這樣做的好處是，我們可以把邏輯和畫面分開，讓程式碼更有組織性。假設我們要做一個計數器的元件，我們可以在 JavaScript 檔案中寫下計數的邏輯，而不用混在 HTML 中，讓程式碼更清晰易讀。

在 HTML 檔案，我們會寫下元件的外貌，也就是它在網頁上的長相。
可以使用 Vue 的模板語法，像是 {{ }} 或者 v-bind 等等來綁定在 JavaScript 中定義的資料，這樣當資料變動時，畫面也會跟著更新。
最後要將寫好的元件引入到主檔案中，這樣才能在整個應用程式中使用。
總結來說，使用 VUE 的元件開發可以讓程式碼更有組織性，也更容易維護。
透過將邏輯和畫面分開寫，讓程式碼更清晰易讀。

元件註冊component:
在 Vue 中創建一個元件，可以使用 Vue.component 方法，並指定組件名稱和元件的配置：

Vue.component('my-component', {
  // 組件的配置選項
});

範例:
Js:

Vue.component('counter-component', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <div>
      <button @click="count++">完成任務</button>
      <p>已完成 {{ count }} 項任務</p>
    </div>
  `
});


new Vue({
  el: '#app'
});

在這段程式碼中，定義了一個名為 counter-component 的 Vue 元件，並在 data 中設置了一個 count 變數，
預設值為 0。接著在 template 中寫下了一個按鈕，當按下時，會使 count 增加，同時顯示已完成的任務數量。

app.html：

<!-- app.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待辦事項清單</title>
</head>
<body>

  <div id="app">
    <counter-component></counter-component>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="CounterComponent.js"></script>
  
</body>
</html>

在這段程式碼中，引入了 Vue 的 CDN，以及剛剛建立的 CounterComponent.js 檔案。
接著在 #app 中使用了<counter-component></counter-component>來引入了我們的計數器元件。

最後打開瀏覽器，用瀏覽器開啟 app.html，就會看到一個簡單的待辦事項清單，包含了一個可以計數的元件了！